import React, { Component } from 'react';
import { Avatar, SearchBar, ListView, Tools, ActivityIndicator, Checkbox } from 'weaver-mobile';
import { RouteLayout } from 'weaver-mobile-page';
import { observer, inject } from 'mobx-react';
import { userType } from '../../../components/form/permission/type';

const { CHATGROUP } = userType;
const getLabel = Tools.getLabel;
const CheckboxItem = Checkbox.CheckboxItem;

@inject('shareStore')
@observer
export default class GroupModal extends Component {

  constructor(props) {
    super(props);

    this.store = props.shareStore;
    this.state = {
      memberList: props.memberList
    };
  }

  componentDidMount() {
    const { getGroupList, pageSize } = this.store;

    getGroupList({
      pagenum: 1,
      pagesize: pageSize,
    }, true);
  }

  componentWillUnmount() {
    const { resetGroupProps } = this.store;

    resetGroupProps();
  }

  onEndReached = () => {
    const { getGroupList, groupValue, currentPage, pageSize, setStoreState } = this.store;
    getGroupList({
      pagenum: currentPage + 1,
      pagesize: pageSize,
      group_name: groupValue,
    });
    setStoreState({ currentPage: currentPage + 1 });
  }

  onSubmit = (value) => {
    const { getGroupList, setStoreState, pageSize } = this.store;
    setStoreState({
      currentPage: 1,
      groupLoading: true,
    });
    getGroupList({
      pagenum: 1,
      pagesize: pageSize,
      group_name: value,
    }, true);
  }

  clearChatGroup = () => {
    const { clearCharGroup } = this.props;
    clearCharGroup();
  }

  onChange = (data, isSelect) => {
    const { onChangeChatGroup } = this.props;

    onChangeChatGroup({
      id: data.group_id,
      lastname: data.group_name,
      isSelect: isSelect,
      icon: data.imgUrl,
      type: CHATGROUP,
      group_member_size: data.group_member_size
    })
  }

  renderRow = (data) => { // 群组头像,直接通过pros渲染,群组id是没法走接口的
    const { wrapCls, chatGroup } = this.props;
    const { memberList } = this.state;
    const member = memberList.find(ml => ml.id === data.group_id);
    const group = chatGroup.find(cg => cg.id === data.group_id);
    let disable = false;
    let isSelect = false;

    if(group) isSelect = true;
    if(member) disable = true;

    return (//onClick={() => doGroupConfirm(data)}
      <CheckboxItem disabled={disable} checked={disable ? true : isSelect} onChange={() => {this.onChange(data, isSelect)}} >
        <div className={`${wrapCls}-list`} >
          <Avatar name={data.group_name} url={data.imgUrl} isGroup={true} type="0" />
          <div className={`${wrapCls}-list-right`}>
            <div className={`${wrapCls}-list-right-top`}>{data.group_name}</div>
            <div className={`${wrapCls}-list-right-bottom`}>{getLabel(391213, `${data.group_member_size}人`).replace('$s', data.group_member_size)}</div>
          </div>
        </div>
      </CheckboxItem>
    );
  }

  renderFooter = (groupLoading, hasMore) => {
    const { prefixCls } = this.props;
    let content = null;
    if (groupLoading) {
      content = (
        <div className={`${prefixCls}-loadingNext`}>
          <ActivityIndicator text="loading..." />
        </div>
      );
    } else if (!hasMore) {
      content = (
        <div className="wm-list-view-page-modal-nomore">
          <span className="wm-list-view-page-modal-nomore-line-left" />
          <span className="wm-list-view-page-modal-nomore-line-name">{getLabel(390064, '没有更多啦')}</span>
          <span className="wm-list-view-page-modal-nomore-line-right" />
        </div>
      );
    }
    return content;
  };

  render() {
    const { wrapCls, chatGroup } = this.props;
    const { groupValue, setStoreState, pageSize, groupLoading, hasMore, dataSource } = this.store;
    return (
      <RouteLayout>
        <div className={`${wrapCls}-group wm-route-layout`} key="group">
          <SearchBar
            value={groupValue}
            placeholder={getLabel(83788, '请输入关键字')}
            onChange={val => setStoreState({ groupValue: val })}
            onSubmit={this.onSubmit}
          />
          <div className={`${wrapCls}-group-list wea-edc-group-list`}>
            <ListView
              style={{
                height: '100%',
                overflowY: 'auto',
                overflowX: 'hidden',
              }}
              dataSource={dataSource}
              pageSize={pageSize}
              scrollRenderAheadDistance={500}
              onEndReachedThreshold={10}
              onEndReached={() => hasMore && this.onEndReached()}
              renderRow={this.renderRow}
              renderFooter={() => this.renderFooter(groupLoading, hasMore)}
            />
          </div>
          <div className='group-footer'>
              <div className='select-count'>
              <span>{getLabel(523371, '已选')}({chatGroup ? chatGroup.length : 0})</span>
              </div>
            <div className='clear' onClick={this.clearChatGroup}>{getLabel(523372, '清除')}</div>
            <div className='sure' onClick={() => window.history.back(-1)}>{getLabel(83446, '确定')}</div>
          </div>
        </div>
      </RouteLayout>
    );
  }
}
